import { createSlice } from "@reduxjs/toolkit";
import {
  DashboardOutlined,
  ShopOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import DashBoard from "@p/DashBoard";
import ItemLists from '@p/ItemLists'
import CateLists from '@p/CateLists'
import ItemAdd from '@p/ItemAdd'
import ItemUpdate from '@p/ItemUpdate'
import UserInfo from '@p/UserInfo'
import Setting from '@p/SettingPage'
const initialState = {
  userInfo:
    localStorage.getItem('userInfo')
      ?
      JSON.parse(localStorage.getItem('userInfo'))
      :
      {}
  ,
  token: localStorage.getItem('token') || '',
  role: localStorage.getItem('role') || '',
  menus: [
    {
      key: '/dashBoard',
      label: '仪表盘',
      title: '仪表盘',
      roles: '*',
      icon: <DashboardOutlined/>
    },
    {
      key: 'items',
      label: '商品管理',
      title: '商品管理',
      roles: ['a', 'b', 'admin'],
      icon: <ShopOutlined/>,
      children: [
        {
          label: '商品列表',
          key: '/itemLists',
          roles: ['a', 'b', 'admin'],
          title: '商品列表'
        },
        {
          label: '商品分类',
          title: '商品分类',
          roles: ['a', 'b', 'admin'],
          key: '/cateLists'
        }
      ]
    },
    {
      key: '/userInfo',
      label: '个人中心',
      roles: ['a', 'b', 'admin'],
      title: '个人中心',
      icon: <UserOutlined/>
    },
    {
      key: '/setting',
      label: '设置',
      roles: ['a', 'b'],
      title: '设置',
      icon: <SettingOutlined/>
    }
  ],
  authRoutes: [
    {
      path: '/dashBoard',
      name: '仪表盘',
      roles: '*',
      element: DashBoard
    },
    {
      path: '/itemLists',
      name: '商品管理',
      roles: ['a', 'b', 'admin'],
      element: ItemLists
    },
    {
      path: '/CateLists',
      name: '商品分类管理',
      roles: ['a', 'b', 'admin'],
      element: CateLists
    },
    {
      path: '/itemAdd',
      name: '添加商品',
      roles: ['a', 'b', 'admin'],
      element: ItemAdd
    },
    {
      path: '/itemUpdate/:id',
      name: '修改商品',
      roles: ['a', 'b', 'admin'],
      element: ItemUpdate
    },
    {
      path: '/userInfo',
      name: '个人中心',
      roles: ['a', 'b', 'admin'],
      element: UserInfo
    },
    {
      path: '/setting',
      name: '设置',
      roles: ['a', 'b'],
      element: Setting
    }
  ]
}
const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    initUser(state, action) {
      // 参数是对象 
      const { userInfo, token, role } = action.payload;
      state.userInfo = userInfo;
      state.role = role;
      state.token = token;
    },
    // 根据用户角色 过滤 侧边menus 和 路由
    filterAuth(state) {
     
      const role = state.role;
      // 过滤侧边导航
      let authMenus = [];
      state.menus.forEach(menu => {
        if (menu.roles === '*' || menu.roles.includes(role)) {
          // 保存以及菜单
          // 如果当前menu有 children
          if (menu.children) {
            // 过滤子导航
            let subMenus = [];
            subMenus = menu.children.filter(subMenu => (
              subMenu.roles === '*' || subMenu.roles.includes(role)
            ))
            menu.children = subMenus
          }
          authMenus.push(menu);
        }
      })
      state.menus = authMenus;
  
      // 过滤权限路由
      state.authRoutes = state.authRoutes.filter(route => (
        route.roles === '*' || route.roles.includes(role)
      ))
    }
  }
})

export const { initUser, filterAuth } = userSlice.actions;
export default userSlice.reducer;